<template>
  <div>
    <el-dialog title="流程相关"
               :visible.sync="visible"
               width="70%"
               :close-on-click-modal="false"
               :before-close="handleClose">
      <el-tabs v-model="activeName">
        <el-tab-pane name="process"
                     label="流程图">
          <el-empty v-if="!viewFlag"
                    description="暂无流程图"></el-empty>
          <wf-design v-else
                     ref="bpmn"
                     style="height: 500px;"
                     :options="bpmnOption"></wf-design>
        </el-tab-pane>
        <el-tab-pane label="日志"
                     name="log">
          <el-scrollbar style="height:600px;">
            <el-empty v-if="logList.length == 0"
                      description="暂无日志"></el-empty>
            <el-timeline v-else>
              <el-timeline-item v-for="(activity, index) in logList"
                                :key="index"
                                :timestamp="activity.createTime">
                {{activity.flowContent}}
              </el-timeline-item>
            </el-timeline>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { getTrialProcessLog } from '@/api/trial/trial-list'
import { detail } from '@/api/plugin/workflow/process'
import exForm from '@/views/plugin/workflow/mixins/ex-form'
export default {
  mixins: [exForm],
  data () {
    return {
      activeName: 'process',
      visible: false,
      logList: [],
      processInsId: null,
      bpmnOption: {},
      viewFlag: false
    }
  },
  methods: {
    open (id, processInsId) {
      this.activeName = 'process'
      this.processInsId = processInsId
      getTrialProcessLog({ trialFlowId: id }).then(res => {
        this.logList = res.rows
      })
      if (this.processInsId) {
        detail({ processInsId: this.processInsId }).then(res => {
          if (res.code == 200) {
            this.viewFlag = true
            const { process, flow } = res.data
            const { xml } = process

            const bpmnOption = {
              mode: 'view', xml,
              flows: this.handleResolveFlows(flow)
            }
            this.bpmnOption = bpmnOption
          } else {
            this.viewFlag = false
          }
        })
      }
      this.visible = true
    },
    handleClose () {
      this.visible = false
      this.logList = []
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>